<template>
  <div class="api-group">

    <el-tabs type="border-card">
      <el-tab-pane label="接口分组">

        <el-button-group style="margin-bottom: 5px;">
          <el-button type="primary" size="small" icon="el-icon-plus" @click="clickAddGroup()">新建</el-button>
          <el-button type="warning" size="small" icon="el-icon-refresh" @click="getGroup(projectId)">刷新</el-button>
        </el-button-group>

        <el-dialog :title="typeName" :visible.sync="dialogVisible" width="40%">

          <el-form ref="form" :model="groupform" label-width="80px">
            <el-form-item label="分组名" required>
              <el-input v-model="groupform.name" placeholder="请输入分组名"></el-input>
            </el-form-item>
            <el-form-item label="分组描述">
              <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="groupform.remark">
              </el-input>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addOrEditGroup(groupform)">确 定</el-button>
          </span>
        </el-dialog>

        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
        </el-input>

        <div style="height:15px"></div>
        <div style="min-height: 1565px;font-size:14px">
          <el-tree class="filter-tree" :data="data" :filter-node-method="filterNode" @node-click="handleNodeClick" ref="tree">
            <span slot-scope="{node,data}">
              <span v-if="node.level == 1" class="icon iconfont">&#xe600;</span>

              <span v-if="node.level == 2 && node.data.method=='GET'" style="font-size:13px;color: rgb(24, 144, 255);">{{node.data.method}}</span>
              <span v-if="node.level == 2 && node.data.method=='POST'" style="font-size:13px;color: rgb(19, 206, 102);">{{node.data.method}}</span>
              <span v-if="node.level == 2 && node.data.method=='DELETE'" style="font-size:13px;color: rgb(245, 108, 108);">{{node.data.method}}</span>
              <span v-if="node.level == 2 && node.data.method=='PUT'" style="font-size:13px;color:rgb(230, 162, 60);">{{node.data.method}}</span>
              <span>{{ data.name }}</span>

              <span v-if="node.isCurrent == true && node.level == 1" class="el-tree-icon" @click.stop="handleClick">
                <i class="el-icon-edit" @click="clickEditGroup(node,data)"></i>
                <i class="el-icon-delete" @click="deleteGroup(node,data)"></i>
              </span>

              <span v-else-if="node.isCurrent == true && node.level == 2" @click.stop="handleClick">
                <i class="el-icon-delete" @click="deleteApi(node,data)"></i>
              </span>
            </span>

          </el-tree>

        </div>

      </el-tab-pane>

    </el-tabs>

  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false,
      projectId: null,

      type: 'add',
      typeName: '新建分组',

      groupform: {

      },

      filterText: '',
      data: [],



    }
  },

  watch: {
    filterText (val) {
      this.$refs.tree.filter(val);
    },
  },


  methods: {

    //点击新建分组
    clickAddGroup () {
      this.dialogVisible = true
      this.type = 'add'
      this.typeName = '新建分组'
      this.groupform = {
        name: '',
        remark: '',
        projectId: this.$store.state.api.projectId,
      }

    },

    //
    clickEditGroup (node, data) {
      this.dialogVisible = true
      this.type = 'update'
      this.typeName = '编辑分组'
      this.groupform = {
        id: data.id,
        name: data.label,
        remark: data.remark,
        projectId: this.$store.state.api.projectId,
      }



    },

    //获取分组
    getGroup (projectId) {
      this.data = []
      this.$http({
        url: this.$http.adornUrl('/aitesting/group/listByProjectId'),
        method: 'get',
        params: {
          projectId: this.$store.state.api.projectId,
        }
      }).then(({ data }) => {
        if (data.code == 0) {
          this.data = data.list
        } else {
          this.$message({
            message: data.msg,
            type: 'warning'
          });
        }
      })
    },

    //添加或编辑分组
    addOrEditGroup (form) {
      console.log(form)
      form.type = 0
      let path = ''
      if (this.type == 'add') {
        path = '/aitesting/group/save'
      } else if (this.type == 'update') {
        path = '/aitesting/group/update'
      }
      this.$http({
        url: this.$http.adornUrl(path),
        method: 'post',
        data: form,
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message({
            type: 'success',
            message: data.msg,
          });
          this.dialogVisible = false
          this.getGroup(this.$store.state.api.projectId)
        } else {
          this.$message({
            type: 'warning',
            message: data.msg,
          });
        }
      })


    },

    //删除分组
    deleteGroup (node, data) {
      this.$confirm('此操作将永久删除该分组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/aitesting/group/delete'),
          method: 'delete',
          params: {
            groupId: data.groupId,
          }
        }).then(({ data }) => {
          if (data.code == 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getGroup(this.$store.state.api.projectId)
          } else {
            this.$message({
              message: data.msg,
              type: 'warning'
            });
          }
        })
      }).catch(() => {
      });
    },

    //删除接口
    deleteApi (node, data) {
      this.$confirm('此操作将永久删除该接口, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/aitesting/api/delete'),
          method: 'delete',
          params: {
            apiId: data.id,
          }
        }).then(({ data }) => {
          if (data.code == 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getGroup(this.$store.state.api.projectId)
          } else {
            this.$message({
              message: data.msg,
              type: 'warning'
            });
          }
        })
      }).catch(() => {
      });
    },

    //节点点击时触发
    handleNodeClick (data, Node) {
      if (Node.level == 1) {
        //更新接口管理接口
        this.$emit('getApi', 'son', this.projectId, data.groupId)

        //更新用例管理接口
        this.$emit('getApiCase', 'son', this.projectId, data.groupId)

      } else if (Node.level == 2) {
        //更新接口管理接口
        this.$emit('getApi', 'son', this.projectId, '', data.id)
        this.$emit('getApiFormInfo', data.id)

        //更新用例管理接口
        this.$emit('getApiCase', 'son', this.projectId, '', data.id)

      }
    },



    handleClick () { },

    filterNode () {
    }
  },

  activated () {
    this.projectId = this.$store.state.api.projectId
    this.getGroup(this.projectId)
  },

  //钩子函数
  mounted () {

  }
}
</script>

<style scoped>
.api-group {
  height: 100%;
}

.el-tree-icon {
  padding-left: 10px;
}

.api-group >>> .el-tree-node__content {
  height: 30px;
}
</style>